<template>
  <div>
    <van-form>
      <van-cell-group>
        <van-field
          v-model="oldPassword"
          label="旧密码"
          placeholder="请输入旧密码"
          :rules="[
            { required: true, message: '请填写旧密码', trigger: 'onBlur' },
          ]"
        />
        <van-field
          v-model="newPassword"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[
            { required: true, message: '请填写新密码', trigger: 'onBlur' },
          ]"
        />
        <van-field
          v-model="rePassword"
          label="确认密码"
          placeholder="请重新输入新密码"
          :rules="rePwdRules"
        />
      </van-cell-group>
      <div class="btn">
        <van-button round block type="primary" @click="confirm"
          >确定</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { updatePassword } from "@/api";
import { ref } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter();
import useShopStore from "../store/shop";
const shopStore = useShopStore();
const oldPassword = ref("");
const newPassword = ref("");
const rePassword = ref("");
const rePwdRules = ref([
  { required: true, message: "请填确认密码" },
  {
    validator: (value) => {
      return value === newPassword.value;
    },
    message: "密码不一致",
    trigger: "onBlur",
  },
]);

const confirm = async () => {
  let { code, message } = await updatePassword(newPassword.value);
  Toast(message);
  if (code === 20000) {
    shopStore.setToken("");
    shopStore.setRefreshToken("");
    shopStore.setUserInfo({});
    shopStore.setShopCarList([]);
    $router.push("/login");
  }
};
</script>

<style lang="scss" scoped>
.btn {
  margin-top: 16px;
}
</style>
